<template>
  <div class='messageWrapper'>
    <div class='header'>
      <span @click="backToDocterMainPage" class='backIcon'>{{point}}</span>
      <span>消息</span>
    </div>
    <div class="content">
      <div class="time">今天16:32</div>
      <div v-for="(item, index) in message" :key="index">
        <div :class="[item.userId === message[0].userId? 'left' : 'right']">
          <div class='avatar'>
            <img src="../.././../public/image/user1.png" alt="">
          </div>
          <span class='messageContent'>{{item.content}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import auth from '../../common/auth';
import { getSetting, getUserInfo, setStorageSync, getStorageSync, getOpenId } from '../../utils/wechatAuth';
export default {
  components: {
    auth
  },
  methods: {
    getUserInfo(e) {
      getUserInfo((userInfo) => {
        wx.showTabBar()
        setStorageSync('userInfo' , userInfo)
        const openId = getStorageSync('openId')
        if (!openId || openId.length === 0) {
          console.log('openId is null')
          getOpenId()
        } else {
          console.log(openId)
        }
        wx.getLocation({
          success(res) {
            
          }
        })
        }, ()=>{console.log('fail')})
    },
    getSetting() {
      getSetting('userInfo', () => {console.log('success')}, () => {console.log('fail')})
    },
    getPhoneNumber(e) {
      console.log(1232132131231)
      console.log(e)
    }
  },
  mounted () {
    this.getSetting()
    getOpenId()
    console.log(this.message[0].userId)
  },
  data () {
    return {
      point: '<',
      message: [
        {
          userId: 1,
          avatar: '',
          content: '刘医生牛逼牛逼的时代撒大声地'
        },
        {
          userId: 2,
          avatar: '',
          content: '刘医生牛逼牛逼的时代撒大声地'
        },
        {
          userId: 1,
          avatar: '',
          content: '刘医生牛逼牛逼的时代撒大声地'
        },
      ]
    }
  }
}
</script>
<style scoped>
.messageWrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f3f1f4;
}
.header{
  height: 150rpx;
  line-height: 150rpx;
  width: 100%;
  background-color: #f3f1f4;
  padding-left: 40rpx;
  font-size: 36rpx;
  color: #000000;
}
.header .backIcon {
  display: inline-block;
  margin-right: 20rpx;
}
.content {
  position: absolute;
  box-sizing: border-box;
  padding: 0 20rpx;
  top: 150rpx;
  bottom: 0;
  width: 100%;
  color: #282828;
}
.time {
  text-align: center;
  width: 100%;
  height: 30rpx;
  line-height: 30rpx;
  font-size: 26rpx;
  color: #7e7c7f;
  margin-bottom: 40rpx;
}
.left, .right {
  width: 100%;
  height: 150rpx;
}
.left {
  float: left;
}
.messageContent {
  box-sizing: border-box;
  padding: 0 20rpx;
  display: inline-block;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #ffffff;
  color: #000000;
  font-size: 32rpx;
  margin-left: 20rpx;
}
.right .messageContent {
  float: right;
  margin-right: 20rpx;
}
.left .avatar {
  width: 80rpx;
  height: 80rpx;
  float: left;
}
.avatar img {
  width: 100%;
  height: 100%;
}
.right {
  float: right;
}
.right .avatar {
  width: 80rpx;
  height: 80rpx;
  float: right;
}
</style>